<template>
  <el-aside width='200px'>
      <!-- @open="handleOpen" @close="handleClose" :collapse="isCollapse" -->
    <el-menu default-active="1-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
      <router-link class="link" to='/manage/goods'>
        <el-menu-item index="1">
          <i class="el-icon-news"></i>
          {{Text.goodsUrlText}}
        </el-menu-item>
      </router-link>
      <router-link class="link" to='/manage/setting'>
        <el-menu-item index="2">
          <i class="el-icon-setting"></i>
          {{Text.settingsUrlText}}
        </el-menu-item>
      </router-link>
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  name: 'sideBar',
  props: {},
  data() {
    return {
      isCollapse: false,
      Text: {
        goodsUrlText: this.$t('sideBar.goodsUrlText'),
        settingsUrlText: this.$t('sideBar.settingsUrlText')
      }
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      // eslint-disable-next-line
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      // eslint-disable-next-line
      console.log(key, keyPath)
    }
  },
  computed: {},
  mounted() {}
}
</script>
<style lang="less" scoped>
.el-aside{
  background-color: #eef1f6;
}
.link{
  height: 100%;
  width: 100%;
  display: inline-block;
}
</style>
